<template>
	<view class="page_body">
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子 -->
		<view class=""
			:style="{'height': height}"></view>
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
				@click='navToBack'
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'" style="width:auto;" class="title">{{title}}</text>
		</navBar>
		<!-- 搜索栏 -->
		<view style="background-color: #FFF;">
			<search 
			@searchBlur='searchBlur'
			:isLinks='false'
			@updateInput="updateInput"
			@nativeInput="nativeInput"
			:showTop="false"
			bgColor="#F5F5F5">
			</search>
		</view>
		
		<view class="classlfiCation_shaixuan">
			<text :class="shaixuanActive == 0 ? 'classlfiCation_shaixuan_acticve' : ''"
				@click="tapShaixuan(0)">综合</text>
			
			<view style="display: flex;align-items: center;" class="">
				<text 
				:class="shaixuanActive == 1 ? 'classlfiCation_shaixuan_acticve' : ''"
					@click="tapShaixuan(1)">销量</text>
				<view 
				v-if="shaixuanActive == 1"
				style="display: flex;flex-direction: column;align-items: center;margin-left: 10rpx;justify-content: space-between;" class="">
					<image
					style="width: 12rpx;height: 8rpx;margin-bottom: 8rpx;"
					:src="searchParams.sort == 1 ? xcxImgUrl && xcxImgUrl+'classitys/paixujiantou_active.svg' : xcxImgUrl && xcxImgUrl+'classitys/paixujiantou.svg'"></image>
					<image
					style="width: 12rpx;height: 8rpx;transform: rotate(180deg);"
					:src="searchParams.sort == 2 ? xcxImgUrl && xcxImgUrl+'classitys/paixujiantou_active.svg' : xcxImgUrl && xcxImgUrl+'classitys/paixujiantou.svg'"></image>
				</view>
			</view>
			
			<!-- <text :class="shaixuanActive == 2 ? 'classlfiCation_shaixuan_acticve' : ''"
				@click="tapShaixuan(2)">价格</text> -->
			
			<view >
				<image @click="showListWay = true"
					v-if="!showListWay"
					style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;"
					:src="xcxImgUrl && xcxImgUrl+'classitys/shuangpaizhanshi.svg'"></image>
				<image @click="showListWay = false"
					v-if="showListWay"
					style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;"
					:src="xcxImgUrl && xcxImgUrl+'classitys//danpaizhanshi.svg'"></image>
				<image class="mr10"
					@click="tapShaixuan(3)"
					:src="shaixuanActive != 3 ? xcxImgUrl && xcxImgUrl+'shaixuan.svg' : xcxImgUrl && xcxImgUrl+'shaixuan_active.svg' "
					style="width: 36rpx;height: 36rpx;vertical-align: middle;">
				</image>
				<text 
				@click="tapShaixuan(3)"
				:class="shaixuanActive == 3 ? 'classlfiCation_shaixuan_acticve' : ''">筛选
				</text>
				
			</view>
		</view>
		
		
			<!-- 列表 分类页面>-->
			<scroll-view class="classlfiCation_list"
				scroll-y
				@scrolltolower="scrolltolower"
				:style="{'height': 'calc(100vh -  ' + demoTopHieght + ')'}">

					<!-- <view class="classlfiCation_list_top pd_lr10">
						<view class="classlfiCation_list_top_left textOneShow">
							婴儿奶粉
						</view>
						<view class="classlfiCation_list_top_right">
							<image @click="showListWay = true"
								v-if="!showListWay"
								style="width: 32rpx;height: 32rpx;"
								src="/static/classitys/shuangpaizhanshi.svg"></image>
							<image @click="showListWay = false"
								v-if="showListWay"
								style="width: 32rpx;height: 32rpx;"
								src="/static/classitys//danpaizhanshi.svg"></image>
							<view class="classlfiCation_list_top_right_x"
								@click="tapSort(0)">
								<text :class="sortActive == 0 ? 'classlfiCation_shaixuan_acticve' : ''">销量</text>
								<view v-if="sortActive == 0"
									class="classlfiCation_list_top_right_xx ml5">
									<image style="width: 12rpx;height: 8rpx;"
										:src="searchParams.sort == 1 ? '/static/classitys/paixujiantou_active.svg' : '/static//classitys/paixujiantou.svg'">
									</image>
									<image style="width: 12rpx;height: 8rpx;transform: rotate(180deg);"
										:src="searchParams.sort == 2 ? '/static/classitys/paixujiantou_active.svg' : '/static//classitys/paixujiantou.svg'">
									</image>
								</view>
							</view>
							<view class="classlfiCation_list_top_right_x"
								@click="tapSort(1)">
								<text :class="sortActive == 1 ? 'classlfiCation_shaixuan_acticve' : ''">价格</text>
								<view v-if="sortActive == 1"
									class="classlfiCation_list_top_right_xx ml5">
									<image style="width: 12rpx;height: 8rpx;"
										:src="searchParams.sort == 3 ? '/static/classitys/paixujiantou_active.svg' : '/static//classitys/paixujiantou.svg'">
									</image>
									<image style="width: 12rpx;height: 8rpx;transform: rotate(180deg);"
										:src="searchParams.sort == 4 ? '/static/classitys/paixujiantou_active.svg' : '/static//classitys/paixujiantou.svg'">
									</image>
								</view>
							</view>
						</view>
					</view> -->
					<!-- 双排 -->
					<view class="doyoulike_list pd_lr10"
						v-if="!showListWay">
						<!-- <view style="padding: 10rpx;"
						@click='toDetails(item)'
							v-for="(item,index) of commonList"
							:key="index">
							<guessWhatYouLike :showWay="2"
								:item="item"></guessWhatYouLike>
						</view> -->
						<view style="width:calc(50% - 10rpx)">
							<view style="padding: 10rpx 0;" v-for="(cnit,icin) of commonList"
								 :key="icin" v-if="icin % 2 ===0">
								<guessWhatYouLike  :item="cnit"></guessWhatYouLike>
							</view>
						</view>
						<view style="width:calc(50% - 10rpx)">
							<view style="padding: 10rpx 0;" v-for="(cnit,icin) of commonList"
								 :key="icin" v-if="icin % 2 !==0">
								<guessWhatYouLike  :item="cnit"></guessWhatYouLike>
							</view>
						</view>
					</view>
					<!-- 单排 -->
					<view class=""
						v-if="showListWay">
						<view style="padding-bottom:10rpx ;"
						@click='toDetails(item)'
							v-for="(item,index) of commonList"
							:key="index">
							<guessWhatYouLike :showWay="1"
								:item="item"></guessWhatYouLike>
						</view>
					</view>
				</scroll-view>

		
		<!-- 筛选弹出层 -->
		<u-popup 
		:show="fenleiShow"
		closeOnClickOverlay
		@close='closePop'
		round='30'
		>
		    <view class="search_item">
				<view class="search_item_top">
					筛选
				</view>
				<view class="search_item_bom pd_lr10 ">
					<!-- <view class="search_item_bom_one mt10">
						<view class="">
							价格区间（元）
						</view>
						<view class="search_item_bom_one_input mt10">
							  <u--input
							    placeholder="最低价格"
							    border="surround"
							    @change="change"
								shape='circle'
								type='number'
								
							  ></u--input>
							  ~
							    <u--input
							      placeholder="最高价格"
							      border="surround"
							      @change="change"
								  shape='circle'
								  type='number'
							    ></u--input>
						</view>
					</view> -->
					
					<view class="search_item_bom_one mt10">
						<view class="">
							商品品牌
						</view>
						<scroll-view scroll-y class="classlfiCationScroll" :style="{'height': 'calc(100vh  - 600rpx)'}">
						<view class="search_item_bom_tow mt10">
							<view
							 v-for="(item,index) in brandList"
							 :key="item.brandId"
							 @click="selectBrand(index)"
							 class="search_item_bom_tow_l"
							 :class="brandIndex == index ? 'search_item_bom_tow_l_active' : ''"
							 >
								{{item.name ? item.name : ''}}
							</view>
						</view>
						</scroll-view>
					</view>
					
				</view>
				
				<view class="btm pd_lr10">
					<view 
					@click="reset"
					class="btm_one">
						重置
					</view>
					<view 
					@click="sure"
					class="btm_tow">
						确定
					</view>
				</view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import classifiCation from '../components/classIfiCation/classIfiCation.vue'
	import {listMobileCommodityPageInfo,listMallCommodityBrandPageInfo} from '@/api/global.js'
	export default {
		components: {
			classifiCation
		},
		computed: {
			...mapGetters(['demoTopHieght']),
			
		},
		data() {
			return {
				productSearch:'',
				objectTag:``,
				objectType:``,
				statusBarHeight: '',
				height: '',
				title: '', //标题
				page:'',//从哪个页面过来
				shaixuanActive: '', //选择的筛选下标
				showListWay:false,//切换展示方式
				sortActive:0,//选择的排序下标
				commonityPageData:{
					currentPage:1,
					pageSize:10
				},//商品分页
				commonityLastPage:1,
				searchParams:{
					search:'',
					brandId:'',//商品品牌id
					// tag:'',//猜你喜欢类型：[1.按商品销量  2.按商品上架时间  3.按商品点击量  4.自定义]
					// objectType:'',//对象类型[1：商品id 2：商品品牌id 3：商品分类id]
					warehouseId:'',//仓库id[关联仓库表]
					sort:3,
					searchTag:1,//搜索标记[1：正常搜索 2: 热销商品 3:常购商品 4:上新商品]
					classifyId:'',//类别id
				},
				commonList:[],//商品列表
				fenleiShow:false,//分类弹出显示层
				brandList:[],//品牌列表
				brandIndex:'-',//品牌索引
			};
		},
		onLoad(options) {
			//接收不同页面传过来的标题
			this.title = options.title || ''
			//标记从哪个页面过来的 决定返回到哪去
			this.page = options?.page || ''
			this.objectTag = options?.tag || ``;
			this.objectType = options?.type || ``;
			//获取商品列表
			//获取前先看有没有搜索条件
			console.log(options?.brandId, 'options?.brandId');
			this.searchParams.search = options.search || '';
			this.searchParams.brandId = options?.brandId || ``;
			this.shaixuanActive = options?.active
			this.getCommonityList()
				
			
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.height = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('classlfiCation_list')
			})
		},
		onHide() {
			this.$store.commit('updateSearch','')
		},
		provide() {
							return {
								resetList: this.resetList
							}
						},
		methods: {
				// 购物车数量改变
						resetList(){
							console.log('resetList')
							this.commonityPageData = {
								currentPage: 1,
								pageSize: 10
							},
							this.getCommonityList()
						},
			//筛选弹窗重置
			reset(){
				this.searchParams.brandId = '' //重置筛选条件
				this.shaixuanActive = `-`;
				this.brandIndex = '-'
				this.fenleiShow = false //关闭分类筛选弹窗
				this.commonityPageData.currentPage = 1
				this.commonList = []
				this.getCommonityList()
			},
			closePop(){
			this.reset()	
			},
			//筛选弹窗确认
			sure(){
				this.fenleiShow = false //关闭分类筛选弹窗		
				this.searchParams.sort = 1
				this.commonityPageData.currentPage = 1
				this.commonList = []
				this.getCommonityList()
			},
			//选择品牌
			selectBrand(index){
				this.brandIndex = index
				//赋值
				this.searchParams.brandId = this.brandList[index].brandId
			},
			
			//去商品详情
			toDetails(item){
				console.log(item);
				uni.navigateTo({
					url:`/page_public/commodityDetail?commodityId=${item.commodityId}`
				})
			},
			updateInput(e) {
				// console.log(e);
				this.productSearch = e;
			},
			nativeInput(e) {
			   // if(e.length > 0){
				  //  let regex = /^[\u4e00-\u9fa5a-zA-Z0-9\s]+$/
				  //  				if (!regex.test(e)) {
				  //  				this.Utils.toast(`不允许输入特殊字符`)
				  //  				return
				  //  }
			   // }
					
            this.searchBlur(e)
			},
			//搜索
			searchBlur(item){
				this.searchParams.search = item
				this.commonityPageData.currentPage = 1
				this.commonList = []
				this.getCommonityList()
			},
			//获取商品列表
			async getCommonityList(){
				uni.showLoading()
				let res = await listMobileCommodityPageInfo({
					...this.searchParams,
					...this.commonityPageData,
					markTag:1,
					
					objectTag:this.objectTag,
					objectType:this.objectType
				})
				if(res.code == 2000){
					uni.hideLoading()
					if(this.commonityPageData.currentPage == 1){
						this.commonList =res?.data?.info?.list || []
					}else{
						this.commonList = this.commonList.concat(res?.data?.info?.list || [])
					}this.commonityLastPage = res?.data?.info?.lastPage
				
				}else{
					
					this.Utils.toast(`${res.msg}`)
				}
			},
			//下拉加载
			scrolltolower(){
				console.log(11111111);
				this.commonityPageData.currentPage++
				if(this.commonityPageData.currentPage > this.commonityLastPage){
					return
				}else{
					this.getCommonityList()
				}
			},
			//返回上一级
			navToBack(){
				//清空搜索条件
				this.$store.commit('updateSearch','')
				if(this.page == 'seach'){ //从首页跳搜索
					uni.switchTab({
						url:'/pages/home/home'
					})
				}else{
					uni.navigateBack()
				}
			},
			//点击筛选 0热销 1常购 2上新 3分类
			async tapShaixuan(index) {
				// this.shaixuanActive = index
				
				//点击综合
				if(index == 0){
					this.shaixuanActive = index
					this.searchParams.sort = 1
					this.searchParams.searchTag = 1
					
					
					this.commonityPageData.currentPage = 1
					this.commonList = []
					this.getCommonityList()
					
				}
				
				//点击销量
				if(index == 1){
					this.shaixuanActive = index
					if(this.searchParams.sort == 1){
						this.searchParams.sort = 2
					}else{
						this.searchParams.sort = 1
					}
					
					this.commonityPageData.currentPage = 1
					this.commonList = []
					this.getCommonityList()
				}
				
				//点击分类筛选
				if(index == 3){
					if(this.shaixuanActive != index){
						this.shaixuanActive = 3
						this.fenleiShow = true
						//获取商品品牌接口
						let res = await listMallCommodityBrandPageInfo({
							sort:23,
							currentPage:1,
							pageSize:10000
						})
						if(res.code == 2000){
							this.brandList = res?.data?.info?.list || [];
							this.brandList.forEach((item,index) => {
								if(item.brandId == this.searchParams.brandId){
									this.brandIndex = index
									console.log(this.brandIndex,'this.brandIndex');
								}
							})
							this.searchParams.brandId = this.brandList && this.brandList.length ? this.brandList[0].brandId : '';
						
						}else{
							this.Utils.toast(`${res.msg}`)
						}
					} else{
						this.reset()
					}
					
				}


			},
			//点击排序 0销量 1价格
			tapSort(index){
				console.log(index,this.searchParams.sort);
				this.sortActive = index
				
				//如果点击的销量
				if(index == 0 && (this.searchParams.sort != 1 && this.searchParams.sort != 2)){
					this.searchParams.sort = 1
					return
				}
				if(index == 0 && this.searchParams.sort == 1){
					this.searchParams.sort = 2
					return
				}
				if(index == 0 && this.searchParams.sort == 2){
					this.searchParams.sort = 1
					return
				}
				//如果点击的价格
				if(index == 1 && (this.searchParams.sort != 3 && this.searchParams.sort != 4)){
					this.searchParams.sort = 3
					return
				}
				if(index == 1 && this.searchParams.sort == 3){
					this.searchParams.sort = 4
					return
				}
				if(index == 1 && this.searchParams.sort == 4){
					this.searchParams.sort = 3
					return
				}
			}
		}
	}
</script>

<style lang="scss"
	scoped>
		/deep/.icon .u-icon__icon.uicon-close {
			font-size: 20rpx !important;
		}
	/deep/.nav_item {
	width:auto !important;
	}
	.classlfiCationScroll{
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		/* #ifndef APP-PLUS */
		padding-bottom: 100rpx;
		/* #endif */
				
	}
	/deep/.nav_item {
		  padding-left: 6rpx
	}
	.classlfiCation_shaixuan {
		background-color: #FFF;
		width: 100%;
		height: 88rpx;
		font-size: $font_size_14;
		color: $text_color_808080;
		display: flex;
		align-items: center;
		justify-content: space-around;
	   margin-bottom: 10rpx;
	}
	
		
		.classlfiCation_list{
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;
			
			.classlfiCation_list_top{
				width: 100%;
				height: 60rpx;
				background-color: #FFF;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.classlfiCation_list_top_left{
					font-size: $font_size_14;
					color: $text_color_333;
					flex: 1;
				}
				.classlfiCation_list_top_right{
					width: 200rpx;
					font-size: $font_size_12;
					color: $text_color_808080;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.classlfiCation_list_top_right_x{
						display: flex;
						
						.classlfiCation_list_top_right_xx{
							display: flex;
							flex-direction:column;
							align-items: center;
							justify-content: space-around;
						}
					}
				}
			}
		}
		.doyoulike_list {
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			// box-sizing: border-box;
			// display: grid;
			// grid-template-columns: repeat(2, calc(100% / 2));
			// grid-gap: 20rpx;
			
			
		}

	.classlfiCation_shaixuan_acticve {
		color: $text_color_ec4141;
	}
	
	.search_item{
		width: 100%;
		height: 65vh;
		.search_item_top{
			height: 88rpx;
			border-bottom: 1px solid #f3f3f3;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			color: $text_color_333;
			font-weight: bold;
		}
		.search_item_bom{
			font-size: 32rpx;
			color: $text_color_333;
			.search_item_bom_one{
				.search_item_bom_one_input{
					display: flex;
					align-items: center;
				}
				.search_item_bom_tow{
					display: flex;
					flex-wrap: wrap;
					gap: 10rpx;
					height:566rpx;
					overflow: auto;
					.search_item_bom_tow_l{
						width: 220rpx;
						height: 80rpx;
						border-radius: 60rpx;
						background-color: #f3f3f3;
						color: $text_color_333;
						font-size: $font_size_14;
						line-height: 80rpx;
						text-align: center;
					}
					.search_item_bom_tow_l_active{
						background-color: $text_color_ec4141;
						color: #FFF;
					}
				}
			}
		}
		
		.btm{
			width: 100%;
			height: 88rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom:20rpx;
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			.btm_one{
				width: 45%;
				height: 100%;
				color: $text_color_333;
				border: 1px solid #f3f3f3;
				border-radius: 60rpx;
				text-align: center;
				line-height: 88rpx;
			}
			.btm_tow{
				width: 45%;
				height: 100%;
				color: $text_color_333;
				background-color: $text_color_ec4141;
				border-radius: 60rpx;
				color: #FFF;
				text-align: center;
				line-height: 88rpx;
			}
		}
	}
	
</style>